<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="canvas" style=" border: 1px solid #aaa; display: block; margin: 50px auto;">
    当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>

<script>
    window.onload = function(){

        var canvas = document.getElementById("canvas");

        canvas.width = 800;
        canvas.height = 800;

        var context = canvas.getContext('2d');

        context.fillStyle = "black";
        context.fillRect( 0 , 0 , canvas.width , canvas.height );

        for ( var i = 0 ; i < 200 ; i ++) {

        	var r = Math.random() * 10 + 10;

        	var x = Math.random() * canvas.width;

        	var y = Math.random() * canvas.height;

        	var rot = Math.random() * 360;

        	drawStar( context , x , y , r , rot );
        	/*drawStar( context , r / 2.0 , r , x , y , rot , "#fb3" , "#fd5" , 3 , "round" );*/

        }
        
        /*context.lineWidth = 50;
        context.strokeStyle = "#005588";

        context.beginPath();
        context.moveTo( 100 , 200 );
        context.lineTo( 700 , 200 );
        context.lineCap = "butt";
        context.stroke();

        context.beginPath();
        context.moveTo( 100 , 400 );
        context.lineTo( 700 , 400 );
        context.lineCap = "round";
        context.stroke();

        context.beginPath();
        context.moveTo( 100 , 600 );
        context.lineTo( 700, 600 );
        context.lineCap = "square";
        context.stroke();

        context.lineWidth = 1;
        context.strokeStyle = "#27a";
        context.moveTo( 100 , 100 );
        context.lineTo( 100 , 700 );
        context.moveTo( 700 , 100 );
        context.lineTo( 700 , 700 );
        context.stroke();*/

		/*drawRect1( context , 100 , 100 , 200 , 200 , 5 , "#058" , "red");

    	drawRect1( context , 500 , 500 , 200 , 200 , 5 , "#058" , "red");
    	
    	drawRect2( context , 300 , 300 , 200 , 200 , 5 , "#058" , "red");

    	drawRect2( context , 500 , 100 , 200 , 200 , 5 , "#058" , "red");

    	drawRect2( context , 100 , 500 , 200 , 200 , 5 , "#058" , "red");*/

        // context.lineWidth = 10;

		// 三个箭头
        /*
        context.beginPath();
        context.moveTo(100, 200);
        context.lineTo(300, 400);
        context.lineTo(100, 600);
        context.strokeStyle = "red";
        context.stroke();

		context.beginPath();
        context.moveTo(300, 200);
        context.lineTo(500, 400);
        context.lineTo(300, 600);
        context.strokeStyle = "green";
        context.stroke();

    	context.beginPath();
        context.moveTo(500, 200);
        context.lineTo(700, 400);
        context.lineTo(500, 600);
        context.strokeStyle = "blue";
        context.stroke();
        */

        // 一个箭头
        /*
        context.beginPath();
        context.moveTo(100, 350);
        context.lineTo(500, 350);
        context.lineTo(500, 200);
        context.lineTo(700, 400);
        context.lineTo(500, 600);
        context.lineTo(500, 600);
        context.lineTo(500, 450);
        context.lineTo(100, 450);

        // 使用closePath ，此时最后的lineTo可省略
        context.lineTo(100, 350);
		context.closePath();

		context.fillStyle = "yellow";
		context.strokeStyle = "red";

		context.fill();
		context.stroke();
		*/
        
    }

    function drawStar()
    {
    	starPath();

    	// 绘制出在 ( x , y ) ,大小为R,旋转rot度的五角星
    	
    }

    function starPath( cxt )
    {
    	cxt.beginPath();
        for ( var i = 0 ; i < 5 ; i ++ ) {
        	cxt.lineTo( Math.cos( ( 18 + i * 72 ) / 180 * Math.PI ) ,
        					-Math.sin( ( 18 + i * 72 ) / 180 * Math.PI ) );
        	cxt.lineTo( Math.cos( ( 54 + i * 72 ) / 180 * Math.PI ) ,
        					-Math.sin( ( 54 + i * 72 ) / 180 * Math.PI ) );
        }
        cxt.closePath();
    }

    /*function drawStar( cxt , innerR , outerR , x , y , rot , fillColor , strokeColor , lineWidth , lineJoin )
    {
    	cxt.beginPath();
        for ( var i = 0 ; i < 5 ; i ++ ) {
        	cxt.lineTo( Math.cos( ( 18 + i * 72 - rot ) / 180 * Math.PI ) * outerR + x ,
        					-Math.sin( ( 18 + i * 72 - rot ) / 180 * Math.PI ) * outerR + y);
        	cxt.lineTo( Math.cos( ( 54 + i * 72 - rot ) / 180 * Math.PI ) * innerR + x ,
        					-Math.sin( ( 54 + i * 72 - rot ) / 180 * Math.PI ) * innerR + y);
        }
        cxt.closePath();

        cxt.fillStyle = fillColor;
        cxt.strokeStyle = strokeColor;
        cxt.lineWidth = lineWidth;
        cxt.lineJoin = lineJoin;

        cxt.fill();
        cxt.stroke();
    }*/

    function drawRect( cxt , x , y , width , height , borderWidth , borderColor , fillColor)
    {
    	cxt.beginPath();

    	cxt.moveTo( x , y );
    	cxt.lineTo( x + width, y );
    	cxt.lineTo( x + width, y + height );
    	cxt.lineTo( x , y + height );

    	cxt.closePath();

    	cxt.lineWidth = borderWidth;
    	cxt.fillStyle = fillColor;
    	cxt.strokeStyle = borderColor;

    	cxt.fill();
    	cxt.stroke();
    }

    function drawRect1 ( cxt , x , y , width , height , borderWidth , borderColor , fillColor)
    {
    	cxt.beginPath();
    	cxt.rect( x , y , width , height );
    	cxt.closePath();

    	cxt.lineWidth = borderWidth;
    	cxt.fillStyle = fillColor;
    	cxt.strokeStyle = borderColor;

    	cxt.fill();
    	cxt.stroke();
    }

    function drawRect2 ( cxt , x , y , width , height , borderWidth , borderColor , fillColor)
    {
    	cxt.lineWidth = borderWidth;
    	cxt.fillStyle = fillColor;
    	cxt.strokeStyle = borderColor;

    	cxt.fillRect( x , y , width , height );
    	cxt.strokeRect( x , y , width , height );
    }
</script>
</body>
</html>